<html>
<head>
		<script type="text/javascript" src='../libs/yahoo.js'></script>
		<script type="text/javascript" src='../libs/animation.js'></script>
		<script type="text/javascript" src='../libs/dom.js'></script>
		<script type="text/javascript" src='../libs/event.js'></script>
		<script type="text/javascript" src='../libs/json.js'></script>
		<script>
		var currIdx = 0;
		function changeChar(){
			var dir = arguments[1]
			//console.log(dir)
			switch(dir){
				case 'prev': 
					currIdx-=256
					if(currIdx <0){
						currIdx = 39*256
					}
					break;
				case 'next':
					currIdx+=256;
					if(currIdx>(39*256)){
						currIdx = 0;
					}
					break;
			}
			//console.log(currIdx)
			alert('direction:' + dir + "offset"+ currIdx);
			//YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get('charpreviewimg'),'backgroundPosition',currIdx+'px');
			//document.getElementById('charpreviewimg').style.backgroundPosition = currIdx+'px';
			YAHOO.util.Dom.setStyle(YAHOO.util.Dom.get('charpreviewimgsrc'),'left','-'+currIdx+'px');
		}
		
		YAHOO.util.Event.addListener('prev','click',changeChar,'prev')
		YAHOO.util.Event.addListener('next','click',changeChar,'next')
		
    
    var yhost = window.external;
		function ready(){
			yhost.LocalReady();
		}
		</script>
		<style>
		body{
			background-color: tan;
		}
		#charpreviewimg{
			width:128px;
			height:128px;
			xbackground-image:url('../img/characters_trans.gif');
			overflow: hidden;
			border: 1px solid red;
			position: relative;
		}
		#charpreviewimgsrc{
      position: absolute;
      top: 0px;
      left: 0px;
    }
		.hideme{
			display: none;
		}
		

		</style>
</head>
<body onload='ready()'>
<div id="charpreviewimg">
  <img id='charpreviewimgsrc' src="../img/characters_trans.gif">
</div>
<div>
<div><a id='prev' href="javascript:void(0)">PREV</a></div>
<div><a id='next' href="javascript:void(0)">NEXT</a></div>

</div>
<div class='hideme'>

<img src="../img/characters_trans.gif"/>
</div>
</body>
</html>